<template>
  <div>
    <div>
      <el-form :inline="true" @submit.native.prevent>
        <el-form-item>
          <el-input v-model="search" placeholder="请输入问题" @keyup.enter.native="handleSearch" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column prop="title" label="问题" :show-overflow-tooltip="true" />
        <el-table-column label="院校">
          <template slot-scope="t">
            {{ t.row.academy ? t.row.academy.academy_name : '' }}
          </template>
        </el-table-column>
        <el-table-column label="昵称">
          <template slot-scope="t">
            {{ t.row.user ? t.row.user.nick_name : '' }}
          </template>
        </el-table-column>
        <el-table-column label="学校" prop="user.school.title" />
        <el-table-column label="身份">
          <template v-if="t.row.user" slot-scope="t">
            <div v-if="t.row.user.user_type === 1">学生</div>
            <div v-if="t.row.user.user_type === 2">家长</div>
          </template>
        </el-table-column>
        <el-table-column label="地区" prop="user.area.labels" />
        <el-table-column prop="avatar" label="头像">
          <template slot-scope="t">
            <el-image
              style="width: 80px; height: 80px"
              :src="t.row.user?t.row.user.avatar:''"
              fit="cover"
            >
              <div slot="error">
                <img src="@/assets/fail_image/default.png" class="slot-avatar">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="answer_count" label="回复数量" />
        <el-table-column prop="create_time" label="提问时间" />
        <el-table-column width="250">
          <template slot-scope="t">
            <el-button type="primary" @click="handleViewAnswer(t.row)">查看回复</el-button>
            <el-button type="danger" @click="handleDeleteQuestion(t.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <WrapPagination>
      <el-pagination
        class="pagination"
        :current-page="table.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="table.size"
        layout="prev, pager, next"
        :total="table.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </WrapPagination>

    <el-dialog title="回复" :visible.sync="visibleAnswer">
      <el-form ref="answerForm" :model="answerForm" :rules="answerFormRules">
        <el-form-item prop="content">
          <el-input v-model="answerForm.content" type="textarea" :rows="3" placeholder="请输入您的回复" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="danger" @click="visibleAnswer=false">取消</el-button>
        <el-button type="primary" :disabled="disableAnswer" @click="handleSubmitAnswer">发布</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看回复" :visible.sync="visibleAnswerList">
      <div>
        <div v-loading="answerTable.loading">
          <div v-for="x in answerTable.data" :key="x.id" style="">
            <div>
              <el-row>
                {{ x.text }}
              </el-row>
              <el-row>
                <div style="float: right;">
                  <span>{{ x.create_time }}</span>
                  <span>{{ x.user_name }}</span>
                  <el-button type="danger" size="mini" @click="handleDeleteAnswer(x)">删除</el-button>
                </div>
              </el-row>
            </div>
            <el-divider />
          </div>
          <div v-if="answerTable.data.length===0">
            <span>这个问题还没有回复，快去回复吧</span>
          </div>
        </div>
        <WrapPagination>
          <el-pagination
            v-if="answerTable.data.length"
            class="pagination"
            :current-page="answerTable.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="answerTable.limit"
            layout="prev, pager, next"
            :total="answerTable.total"
            @size-change="handleAnswerSizeChange"
            @current-change="handleAnswerCurrentChange"
          />
        </WrapPagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { TableMixin } from '../../../components/mixin'
import { getAllQuestionList, answer, getAnswerList, deleteAnswer, deleteQuestion } from '../../../api/answer'

export default {
  mixins: [TableMixin],
  data() {
    return {
      tableRowClassName: '',
      search: '',
      answerForm: {
        content: ''
      },
      answerTable: {
        total: 0,
        limit: 5,
        page: 1,
        loading: false,
        data: []
      },
      answerFormRules: {
        content: [{ required: true, message: '请输入回复内容' }]
      },
      current: null,
      visibleAnswer: false,
      disableAnswer: false,
      visibleAnswerList: false
    }
  },
  computed: {
    answers() {
      console.log(this.current)
      if (this.current) {
        return this.current.answer
      } else {
        return []
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleAnswerSizeChange(size) {
      this.answerTable.limit = size
      this.getAnswerList(this.current.id)
    },
    handleAnswerCurrentChange(page) {
      this.answerTable.page = page
      this.getAnswerList(this.current.id)
    },
    getAnswerList(id) {
      this.answerTable.loading = true
      return getAnswerList(id, {
        limit: this.answerTable.limit,
        page: this.answerTable.page
      }).then(res => {
        this.answerTable.total = res.meta.total
        this.answerTable.data = res.data
      }).finally(() => {
        this.answerTable.loading = false
      })
    },
    getList() {
      this.wrapResourceList(getAllQuestionList, {
        search: this.search
      })
    },
    handleSearch() {
      this.getList()
    },
    handleViewAnswer(row) {
      const loading = this.$loading({
        lock: true,
        text: '玩儿命加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.getAnswerList(row.id).then(() => {
        console.log(row)
        this.current = Object.assign({}, row)
        this.visibleAnswerList = true
      }).finally(() => {
        loading.close()
      })
    },
    handleAnswer(row) {
      this.current = Object.assign({}, row)
      this.visibleAnswer = true
    },
    handleDeleteAnswer(row) {
      console.log(row)
      this.$confirm('您正在进行删除回复操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAnswer(row.id).then(() => {
          this.getAnswerList(this.current.id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDeleteQuestion(row) {
      this.$confirm('您正在进行删除答疑操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteQuestion(row.id).then(() => {
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSubmitAnswer() {
      this.$refs['answerForm'].validate(valid => {
        if (valid) {
          this.disableAnswer = true
          answer(this.current.id, this.answerForm).then(() => {
            this.$refs['answerForm'].resetFields()
            this.visibleAnswer = false
            this.getList()
            this.$message.success('回复成功')
          }).finally(() => {
            this.disableAnswer = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
  .slot-avatar {
    width: 80px;
    height: 80px;
  }
</style>
